<template>
  <div class="music-item" v-if="music && music.name">
    <div class="header flex f-ai-c">
      <svg class="icon music-icon" aria-hidden="true">
        <use
          :xlink:href="music.type === '音乐' ? '#icon-mv' : '#icon-mv'"
        ></use>
      </svg>
      <span class="type">{{ music.type }}</span>
    </div>
    <div class="main flex f-ai-c f-jc-c">
      <div class="poster flex f-ai-c f-jc-c" @click="handleClickPlay">
        <img :src="music.poster" alt="" />
        <svg class="icon icon-play" v-if="!playing" aria-hidden="true">
          <use xlink:href="#icon-bofang"></use>
        </svg>
        <MusicPlayingEffect v-else class="effect" :color="'#19cf8a'" />
      </div>
      <div class="info flex f-d-c">
        <span class="name">{{ music.name }}</span>
        <span class="author">{{ music.author }}</span>
        <span class="album" v-if="music.album">专辑：{{ music.album }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import MusicPlayingEffect from "@/components/MusicPlayingEffect";
export default {
  name: "MusicItem",
  components: {
    MusicPlayingEffect
  },
  props: {
    current: {
      type: Object,
      default: () => null
    },
    music: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    current(newVal) {
      if (newVal !== null && newVal !== this.music) {
        this.playing = false;
      }
    }
  },
  data() {
    return {
      playing: false
    };
  },
  methods: {
    handleClickPlay() {
      this.playing = !this.playing;
      if (this.playing) {
        this.$emit("play", this.music);
      } else {
        this.$emit("pause", this.music);
      }
    }
  }
};
</script>

<style scoped lang="less">
.music-item {
  box-sizing: border-box;
  margin-bottom: 3vh;
  padding: 1vw;
  width: 100%;
  height: 25vh;
  box-shadow: 1vw 1vw 10px gray;
  .header {
    width: 100%;
    height: 4vh;
    .music-icon {
      width: 8vw;
      height: 8vw;
    }
    .type {
      margin-left: 2vw;
      font-size: 4vw;
      color: #333;
    }
  }

  .main {
    box-sizing: border-box;
    padding: 3vw;
    width: 100%;
    height: 21vh;
    .poster {
      position: relative;
      width: 30vw;
      height: 30vw;
      overflow: hidden;
      img {
        width: 26vw;
        height: 26vw;
        border-radius: 50%;
      }
      .icon-play {
        position: absolute;
        width: 10vw;
        height: 10vw;
      }
      .effect {
        position: absolute;
      }
    }

    .info {
      flex-grow: 1;
      height: 100%;
      .name {
        margin-top: 3vh;
        font-size: 6vw;
        color: #333;
      }
      .author {
        margin-top: 0.7vh;
        font-size: 3.5vw;
        color: gray;
      }
      .album {
        margin-top: 0.2vh;
        font-size: 3vw;
        color: gray;
      }
    }
  }
}
</style>
